<template>
    <el-dialog v-model="centerDialogVisibleFlag" title="提醒" style="width: 500px;" align-center>
        <div class="dialog_content_box">
            <el-icon>
                <WarningFilled />
            </el-icon>
            <p>确定要给该缴费任务的所有学生发送缴费提醒吗？</p>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="clearSendWarn">取消</el-button>
                <el-button type="primary" @click="sendWarnHandle" :disabled="flagTime > 0">
                    <span v-if="flagTime > 0">{{ flagTime }}s </span> 确认
                </el-button>
            </div>
        </template>
    </el-dialog>
    <el-dialog v-model="callFlag" title="提醒" width="500" :before-close="closeDialog">
        <span>是否确定发送催缴通知给未缴费学生的班主任？</span>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="closeDialog">取消</el-button>
                <el-button type="primary" @click="askPaymentHandle" :disabled="disabled"><span v-if="timeNum > 0">{{
        timeNum }}s</span>确认</el-button>
            </div>
        </template>
    </el-dialog>
    <addStudentPaymentView ref="addStudentPaymentView" />
    <div class="app-table">
        <!-- <div class="app-body"> -->
        <!-- header-row-class-name="table_header" -->
        <el-table :data="payList" header-cell-class-name="table_header"
            :header-cell-style="{ background: '#F0F0F0', color: '#999999', height: '50px' }">
            <el-table-column type="selection" width="30" />
            <el-table-column prop="id" label="id" width="50" />
            <el-table-column prop="name" label="任务名称" width="320" />
            <el-table-column prop="reducedPaymentAmount" label="减免总数">
                <template style="display: block" #default="scope">
                    <span>{{ scope.row.reducedPaymentAmount ? scope.row.reducedPaymentAmount : 0 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="userAmount" label="已缴人数">
                <template style="display: block" #default="scope">
                    <span>{{ scope.row.userAmount ? scope.row.userAmount : 0 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="payableAmount" label="已缴金额">
                <template style="display: block" #default="scope">
                    <span>{{ scope.row.payableAmount ? scope.row.payableAmount : 0 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="createName" label="创建人" />
            <el-table-column prop="createTime" label="创建时间" width="180" />
            <el-table-column label="操作" width="200px">
                <template style="display: block" #default="scope">
                    <!-- <el-button class="btn1 btn11" size="small" type="success" @click="goPayList">名单管理</el-button> -->
                    <!-- <el-button class="btn1 btn11" size="small" type="success"
                        @click="sendWarn(scope.row.id)">发送缴费提醒</el-button> -->
                    <el-button class="btn1 btn12" size="small" type="danger"
                        @click="goPayDetail(scope.row.id)">缴费详细</el-button>
                    <!-- <el-button class="btn1 btn13" size="small" type="success">核实总额</el-button> -->


                    <el-popover placement="bottom-start" width="400px">
                        <div class="moreBtn_box">
                            <p @click="askPayment(scope.row.id)">催缴</p>
                            <span></span>
                            <p @click="outService(scope.row.id, scope.row.status)">{{ scope.row.status == 1 ? '停用' :
        "启用" }} </p>
                            <span></span>
                            <p @click="commonHandler(scope.row.id)">同步缴费状态</p>
                            <span></span>
                            <p @click="sendWarn(scope.row.id)">发送缴费提醒</p>
                            <span v-if="!scope.row.payableAmount || scope.row.payableAmount == 0"></span>
                            <p @click="deleteHandle(scope.row.id)"
                                v-if="!scope.row.payableAmount || scope.row.payableAmount == 0">删除</p>

                        </div>
                        <template #reference>
                            <el-button class="btn2" size="small" type="danger">更多<el-icon>
                                    <ArrowDown />
                                </el-icon></el-button>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <template v-slot:empty>
                <el-empty description="暂无数据"></el-empty>
            </template>
        </el-table>
        <div style="margin-top: 20px;float: right;">
            <el-config-provider :locale="locale">
                <el-pagination :total="total" :page-size="limit" :page-sizes="[5, 10, 20, 30, 40, 50, 100]"
                    layout="total, sizes, prev, pager, next, jumper" @size-change="changePageSize"
                    @current-change="changeCurrentPage">
                </el-pagination>
            </el-config-provider>
        </div>
        <!-- </div> -->
        <!-- <bottomView></bottomView> -->
    </div>
</template>
<script>

import { ElConfigProvider, ElMessageBox, ElMessage } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { httpService } from "@/utils/httpService";
import { Picture as IconPicture, Upload, Location, ArrowDown } from "@element-plus/icons-vue";
import { ArrowRight } from '@element-plus/icons-vue'
import { API_BASE_NAME2, API_BASE_NAME3 } from '../../constants';
import addStudentPaymentView from "@/components/studentPayment/addStudentPaymentView.vue";
import { formatTime1 } from "@/utils/dateFormat";
import { mapState, mapActions } from 'vuex';
// import { EventBus } from '@/utils/eventBus';

export default {
    name: "classTeacherList",
    data() {
        return {
            campusName: API_BASE_NAME2,
            campusName1: API_BASE_NAME3,
            type: 0,
            title: "",
            page: 1,
            pages: 0,
            pageSize: 10,
            total: 0,
            limit: 10,
            list: [],
            payList: [],
            departmentList: [],
            callFlag: false,
            disabled: true,
            timeNum: 10,
            sendMsgToUnPayId: "",
            form: {
                teacherName: "",
                className: ""
            },
            navData: [],
            navData1: [],
            centerDialogVisibleFlag: false,
            sendWarnId: '',
            flagTime: 10,
            timer: null,
        };
    },

    components: {
        IconPicture,
        ElConfigProvider,
        ElMessageBox,
        // bottomView,
        ElMessage, Upload, Location, ArrowDown, ArrowRight, addStudentPaymentView
    },
    setup() {
        return {
            locale: zhCn,
        };
    },
    mounted() {
        this.getStudentPayList();
        this.navData = this.$route.matched
        this.getTreeData()
    },
    watch: {
        callFlag(newValue) {
            if (newValue) {
                const timer = setInterval(() => {
                    if (this.timeNum == 0) {
                        this.disabled = false
                        clearTimeout(timer)
                    } else {
                        this.timeNum -= 1
                    }
                }, 1000)
            }
        }
    },
    computed: {

    },
    methods: {
        ...mapActions(['uploadAdd']),


        getTreeData() {
            httpService("/javaApi/baseMenu/queryMyTree", { "systemCode": "6014" }, "get").then((data) => {
                this.list = data[0].children;
                console.log(111111, this.list);
                this.navData1 = this.getAllChildren(this.list);
            });
        },
        getAllChildren(items) {
            let children = [];
            items.forEach(item => {
                children.push(item);
                if (item.children) {
                    children = children.concat(this.getAllChildren(item.children));
                }
            });
            return children;
        },
        goPayList() {
            this.$router.push({ name: 'payListManagementView' })
        },
        addPayment(data) {
            this.$refs.addStudentPaymentView.title = '添加收费';
            this.$refs.addStudentPaymentView.dialogFormVisible = true;
            this.$refs.addStudentPaymentView.id = data.id

        },
        searchEnter: function (e) {
            // 使用 which 和 keyCode 属性来解决兼容问题
            var keyCode = window.event ? e.keyCode : e.which;
            var val = e.target.value;
            if (keyCode == 13 && val) {
                this.page = 1;
                this.getStudentPayList();
            }
        },

        reloadData() {
            this.page = 1;
            this.getStudentPayList()
        },

        onSubmit() {
            this.page = 1;
            this.getStudentPayList();
        },
        // 每页记录数改变，size：回调参数，表示当前选中的“每页条数”
        changePageSize(size) {
            this.pageSize = size;
            this.limit = size;
            this.getStudentPayList();
        },

        // 改变页码，page：回调参数，表示当前选中的“页码”
        changeCurrentPage(page) {
            this.page = page;
            this.getStudentPayList();
        },

        getStudentPayList() {
            httpService(
                "/javaApi/payment/list/" + this.page + "/" + this.pageSize,
                {},
                "get"
            ).then((data) => {
                if (data.list) {
                    data.list.map(item => item.createTime = formatTime1(item.createTime))
                }
                this.payList = data.list
                this.list = data.list
                this.total = data.total;
            });
        },
        sendWarn(id) {
            this.sendWarnId = id
            this.flagTime = 10
            this.centerDialogVisibleFlag = true
            this.timer = setInterval(() => {
                if (this.flagTime == 0) {
                    clearInterval(timer)
                } else {
                    this.flagTime -= 1
                }
            }, 1000)
        },
        sendWarnHandle() {
            let params = new FormData()
            params.append('id', this.sendWarnId)
            console.log(this.sendWarnId);
            httpService("/javaApi/pay/sendPayMessageByPaymentId", params, "post").then(
                (data) => {
                    if (data.code == 200) {
                        ElMessage.success("发送缴费提醒成功");
                        this.clearSendWarn()
                    } else {
                        ElMessage.error("发送缴费提醒失败，请重试！");
                    }
                }
            )
        },
        clearSendWarn() {
            this.sendWarnId = ""
            this.flagTime = 10
            this.timer = null
            this.centerDialogVisibleFlag = false
        },

        goPayDetail(id) {
            const obj = {
                children: [],
                code: 1000,
                icon: "ReturnManage1.png",
                id: 1000,
                label: "缴费详细",
                level: 2,
                levelName: "缴费详细",
                parentId: 199,
                path: `/paymentIndexView/paymentDetailView?id=${id}`,
            }
            this.uploadAdd(obj)
            this.$router.push({
                path: "paymentDetailView",
                query: {
                    id: id
                }
            })
        },
        closeDialog() {
            this.callFlag = false
            this.disabled = true
            this.timeNum = 10
            this.sendMsgToUnPayId = ""
        },
        askPayment(id) {
            this.callFlag = true
            this.sendMsgToUnPayId = id
        },

        askPaymentHandle() {
            let params = new FormData()
            params.append("paymentId", this.sendMsgToUnPayId)
            httpService("/javaApi/userPayment/sendMsgToUnPay", params, "post").then(
                (data) => {
                    if (data.code == 200) {
                        ElMessage.success("催缴成功");
                        this.closeDialog()
                        // this.getPaymentDetailList();
                    } else {
                        ElMessage.error("催缴失败，请重试！");
                    }
                }
            );
        },
        commonHandler(id) {
            let params = new FormData()
            params.append("paymentId", id)
            httpService("/javaApi/pay/invokePayStatus", params, "post").then(
                (data) => {
                    if (data.code == 200) {
                        ElMessage.success("同步成功");
                    } else {
                        ElMessage.error("同步失败，请重试！");
                    }
                }
            );
        },
        commonHandler(id) {
            ElMessageBox.confirm(`确定要同步缴费状态吗？`, "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = new FormData()
                    params.append("paymentId", id)
                    httpService("/javaApi/pay/invokePayStatus", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                this.getStudentPayList()
                                ElMessage.success("同步成功");
                            } else {
                                ElMessage.error("同步失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });


        },
        outService(id, status) {
            ElMessageBox.confirm(`确定要${status == 1 ? '停用' : "启用"}该缴费任务吗？`, "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    let params = new FormData()
                    params.append("id", id)
                    params.append("status", status)
                    httpService("/javaApi/payment/updateStatus", params, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                this.getStudentPayList()
                                ElMessage.success(status == 1 ? "停用成功" : '启用成功');
                            } else {
                                ElMessage.error(status == 1 ? "停用失败，请重试！" : "启用失败，请重试！");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },
        deleteHandle(id) {
            ElMessageBox.confirm(`确定要删除该缴费任务吗？`, "提醒", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    httpService("/javaApi/payment/deleteById", "id=" + id, "post").then(
                        (data) => {
                            if (data.code == 200) {
                                this.getStudentPayList()
                                ElMessage.success('删除成功');
                            } else {
                                ElMessage.error("删除失败");
                            }
                        }
                    );
                })
                .catch(() => {
                });
        },


    },
};
</script>
<style scoped>
.app-table {
    margin-top: 20px;
    padding-bottom: 60px;
}

.table_header {
    /* border-radius: 5px 5px 0 0; */
    background-color: #FF7200;
}

.navBox {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    height: 20px;
}

.btn1 {
    width: 75px;
    height: 32px;
    font-size: 14px;
}

.btn11 {
    width: 100px !important;
    color: #fff;
    background-color: #007EFF;
    border: none;
}

.btn12 {
    color: #fff;
    background-color: #FF7200;
    border: none;
}

.btn13 {
    color: #0065FF;
    background-color: transparent;
    border: 1px solid #0065FF;
}

.btn2 {
    color: #0065FF;
    font-size: 14px;
    background-color: transparent;
    border: none;
}

.shuxian {
    color: #8E8E8E;
    font-size: 12px;
}

.el-popconfirm__main {
    display: none !important;
}

.el-popconfirm__icon {
    display: none !important;
}

.moreBtn_box {
    width: 400px;
    height: 34px;
    display: flex;
    align-items: center;
}

.moreBtn_box p {
    font-size: 14px;
    color: #333;
    cursor: pointer;
}

.moreBtn_box p:hover {
    color: #0065FF;
}

.moreBtn_box span {
    width: 1px;
    height: 10px;
    background-color: #8E8E8E;
    margin: 0 15px;
}

.moreBtn_box button {
    background-color: transparent;
    border: none;
    color: #333333;
}
</style>
